<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('附带边框和样式')}`">{{ $t('附带边框和样式') }}</t>
            <li><span class="d-code">border</span>可以控制表单是否展示边框和背景色</li>
        </template>
        <sib-form border :row-field-size="4" :fields="fields"></sib-form>
    </example>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const fields = ref(Array(8).fill().map((_, i) => ({
            label: '文本框',
            code: `code${i}`,
            type: 'text',
        })));

        return {
            fields,
            templateString: `<template>
    <sib-form border :row-field-size="4" :fields="fields"></sib-form>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const fields = ref(Array(20).fill().map((_, i) => ({
            label: '文本框',
            code: \`code\${i}\`,
            type: 'text',
        })));

        return { fields };
    },
};
<\/script>`,
        };
    },
};
</script>
